<template>
  <div id="containerMap"></div>
</template>

<script>
  import AMapLoader from '@amap/amap-jsapi-loader'
  import iconMarkerLine from '@/assets/svgs/lineCar.svg'
  import iconMarkerQue from '@/assets/svgs/queCar.svg'
  import { defineComponent } from 'vue'
  import mitt from '@/utils/mitter'
  window._AMapSecurityConfig = {
    securityJsCode: 'c948c9ae6c808c812a933f55f702fc37'
  }

  export default defineComponent({
    name: 'Gmap',
    props: {
      longitudelatitude: {}
    },
    watch: {
      longitudelatitude: {
        handler(val) {
          if (!val || Object.keys(val).length === 0) {
            return
          }
          if (!val.lng && !val.lat) {
            return
          }
          setTimeout(() => {
            this.createGaoMarker(val)
          }, 2000)
        },
        immediate: true,
        deep: true
      }
    },
    data() {
      return {
        infoWindow: null,
        fillColor: '#1B84D0',
        strokeColor: '#1B84D055',
        currentLantype: 1,
        map: null,
        AMapLoader: {
          key: '826d41e5f6ed47392c25a3e85b28848b',
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ['AMap.MouseTool', 'AMap.Geolocation', 'AMap.Geocoder'] // 需要使用的插件列表，如比例尺'AMap.Scale'等
        },
        //地图绘制参数
        parameter: {
          zoom: 6, //级别
          center: [106.2529, 39.542], //中心点坐标
          viewMode: '2D', //使用3D视图
          resizeEnable: true,
          draggable: true,
          cursor: 'move',
        },
        overlays: [],
        radio: '',
        geolocation: undefined,
        circleAmap: {
          circleRadius: null,
          lat: null,
          lng: null,
          path: null
        },
        markerRadius: undefined,
        markerPolygon: undefined,
        mouseTool: null, // 鼠标绘图工具
      }
    },
    //地图初始化应该在地图容器div已经添加到DOM树之后,所以放到mounted里面
    created() {
      this.initMap()
    },
    methods: {
      initMap() {
        const _this = this
        AMapLoader.load(_this.AMapLoader)
          .then((AMap) => {
            _this.map = new AMap.Map('containerMap', _this.parameter)
            _this.mouseTool = new AMap.MouseTool(_this.map)
            _this.map.on("click", this.handleMapClick);
          })
          .catch((e) => {
            console.log(e)
          })
      },
      //销毁重绘地图
      destroyMap() {
        this.map.clearMap()
      },
      //自适应
      setFitView() {
        this.map.setFitView()
      },
      // 清除 marker
      clearMarker() {
        this.map.clearMap()
      },
      getZoom() {
        this.map.getZoom()
      },
      //获取定位成功的回调函数
      onComplete(result) {
        console.log('获取定位成功的回调函数', result)
        //做一些事情，比如将位置信息进行处理展示在坐标点上
      },
      //获取定位失败的回调函数
      onError(result) {
        //定位失败，调用ip定位方式
        console.log('定位失败，调用ip定位方式', result)
      },
      handleMapClick(e) {
        // 处理地图单击事件
        this.map.clearMap()
        this.createGaoMarker(e.lnglat)
      },
      searchPOsition(val) {
        setTimeout(() => {
          this.gaoGeocoder(val)
        }, 200)
      },
      // 地址解析 传入具体地理名称  地点定位标记 传入经纬度
      gaoGeocoder(val) {
        this.clearMarker()
        const geocoder = new AMap.Geocoder()
        geocoder.getLocation(val, (status, result) => {
          if (status === 'complete' && result.geocodes.length) {
            const latlng = result.geocodes[0].location
            mitt.emit('handlatlngChange', {
              lng: latlng.lng,
              lat: latlng.lat,
            })
            const marker = new AMap.Marker({
              position: latlng
            })
            this.map.add(marker)
            this.map.setFitView([marker]);
          } else {
            LOG.Log('根据地址查询位置失败')
          }
        })
      },
      // 地点定位标记 传入经纬度
      createGaoMarker(latlng) {
        const marker = new AMap.Marker({
          position: new AMap.LngLat(latlng.lng, latlng.lat)
        })
        // 将创建的点标记添加到已有的地图实例：
        this.map.add(marker)
        mitt.emit('handlatlngChange', {
          lng: latlng.lng,
          lat: latlng.lat,
        })
        this.map.setZoomAndCenter(this.getZoom(), [latlng.lng, latlng.lat])
      }
    }
  })
</script>

<style lang="scss" scoped>
  #containerMap {
    width: 100%;
    height: 100%;

    &::v-deep .amap-logo {
      display: none !important;
    }

    &::v-deep .amap-copyright {
      opacity: 0;
    }

    &::v-deep .amap-marker-label {
      border: 1px solid #4fb3c9 !important;
      background: #a3ccff !important;
    }
  }
</style>